/*
 * @Author: xiaosihan 
 * @Date: 2024-06-20 16:13:35 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-25 16:39:45
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Head from "../PartCollaborate/Head/Head";
import dragModelStore from "../PartCollaborate/Model3d/DragModel/dragModelStore";
import Model3d from "../PartCollaborate/Model3d/Model3d";
import model3dRender from "../PartCollaborate/Model3d/model3dRender";
import loadingGIF from "./loading.gif";
import styles from "./partCollaborateDemo.module.less";
import partCollaborateDemoStore from "./partCollaborateDemoStore";
import RightPlaneDemo from "./RightPlaneDemo/RightPlaneDemo";

interface Iprops {
    children?: ReactNode
}

//零件协作demo
export default function PartCollaborateDemo() {

    const parame = useParams<{ id: string }>();
    const [showPage, setShowPage] = useState(false);
    const [modelId, setModelId] = useState(partCollaborateDemoStore.modelId);
    const [modelName, setModelName] = useState(partCollaborateDemoStore.modelName);

    useEffect(() => autorun(() => {
        setModelId(partCollaborateDemoStore.modelId);
        setModelName(partCollaborateDemoStore.modelName);
    }), []);

    useEffect(() => {
        partCollaborateDemoStore.setBlastProgress(0);
        model3dRender.blastMesh.clear();

        setShowPage(true);
        // const url = get(res, ["data", "url"]);
        // const name = get(res, ["data", "name"]);
        // const userId = get(res, ["data", "userId"]);
        // const size = get(res, ["data", "size"]);
        // const createTime = get(res, ["data", "createTime"]);

        partCollaborateDemoStore.setUserId("游客");
        partCollaborateDemoStore.setModelId("0000");
        partCollaborateDemoStore.setModelName("demo.glb");
        partCollaborateDemoStore.setSize("100MB");
        partCollaborateDemoStore.setCreateTime("2024-9-1");
        model3dRender.loadModel("./homeModal2.glb");
        return () => {
            dragModelStore.closeAll();
        }
    }, []);

    return (
        <div className={styles.partCollaborate} >
            <style>
                {`
                    html,body,#root{ 
                        overflow: hidden; 
                    }  
                `}
            </style>
            {/* 协作的头部 */}
            <Head />
            {
                showPage &&
                <div className={styles.container} >
                    {/* 3d 模型展示 */}
                    <Model3d />

                    {/* 右侧面板 */}
                    <RightPlaneDemo />
                </div>
            }
            {
                !showPage &&
                <div className={styles.loadding} >
                    <img className={styles.loadingGIF} src={loadingGIF} alt="" />
                </div>
            }
        </div>
    );

}